<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8"/>
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width"/>
<title>Studio Francesca</title>
<!-- Included CSS Files-->
<link rel="stylesheet" href="stylesheets/style.css">
<link rel="stylesheet" href="stylesheets/prettyphoto.css"><!-- for gallery -->
<link rel="stylesheet" href="stylesheets/skins/teal.css"><!-- skin color -->
<link rel="stylesheet" href="stylesheets/responsive.css">
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
 
<!-- HEADER
================================================== -->
<div class="row">	
	<div class="four columns">
		<div class="logo">
			<a href="index.html"><h4>东莞木杰五金有限公司</h4></a>
		</div>
	</div>
	<div class="eight columns noleftmarg">		
		<nav id="nav-wrap">
			<ul class="nav-bar sf-menu">
			
				<li class="current">
				<a href="index.html">主页</a> 
				</li>
				
				<li>
				<a href="#">产品展示</a>
					<ul>
					<li><a href="portofolio2.html">2 Columns</a></li>
					<li><a href="portofolio3.html">3 Columns</a></li>
					<li><a href="portofolio4.html">4 Columns</a></li>						
					<li><a href="portofoliodetail.html">Project Details</a></li>
					</ul>
				</li>
				
				<li>
				<a href="blogsinglepost.html">关于我们</a>
					 
				</li>
				
				<li>
				<a href="services.html">人才招聘</a> 
				</li>
				
				<li>
				<a href="elements.html">联系我们</a> 
				</li>
				
				<li>
				<a href="contact.html">最后</a>
				</li>
				
			</ul>
			</nav>
	</div>	
</div>
<div class="clear">
</div>
<!-- SUBHEADER
================================================== -->
<div id="subheader">
	<div class="row">
		<div class="twelve columns">
			<p>
				 PORTOFOLIO Two Columns
			</p>
		</div>
	</div>
</div>
<div class="hr">
</div>
<!-- CONTENT 
================================================== -->
<div class="row">
	<div class="twelve columns">
		<!-- CATEGORIES-->
		<section id="options" class="clearfix">
		<ul id="filters" class="option-set clearfix" data-option-key="filter">
			<li><a href="#filter" data-option-value="*" class="portofoliobutton selected">Show all</a></li>
			<li><a href="#filter" data-option-value=".nature" class="portofoliobutton">Nature</a></li>
			<li><a href="#filter" data-option-value=".trains" class="portofoliobutton">Trains</a></li>
			<li><a href="#filter" data-option-value=".castles" class="portofoliobutton">Castles</a></li>
		</ul>
		</section>
	</div>
</div>
<div id="portofolio" class="row">
	<!-- Project 1-->
	<div class="six columns category trains">
		<h5>OLD TIMES</h5>
		<p>
			 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</p>
		<div class="portofoliothumb">
			<div class="portofoliothumboverlay">
				<div class="viewgallery">
					<!--image here -->
					<a data-gal="prettyPhoto[gallery]" href="images/temp/folio1.jpg"><img src="images/playgal.png" class="left galleryicon" alt=""> Gallery</a>
				</div>
				<div class="inner">
					<a class="projectdetail" href="portofoliodetail.html">+ Project Details</a>
				</div>
			</div>
			<!-- image here -->
			<img src="images/temp/folio1.jpg" alt="">
		</div>
	</div>
	<!-- Project 2-->
	<div class="six columns category castles nature">
		<h5>MASTERPIECE</h5>
		<p>
			 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</p>
		<div class="portofoliothumb">
			<div class="portofoliothumboverlay">
				<div class="viewgallery">
					<a data-gal="prettyPhoto[gallery]" href="images/temp/folio2.jpg"><img src="images/playgal.png" class="left galleryicon" alt=""> Gallery</a>
				</div>
				<div class="inner">
					<a class="projectdetail" href="portofoliodetail.html">+ Project Details</a>
				</div>
			</div>
			<img src="images/temp/folio2.jpg" alt=""/>
		</div>
	</div>
	<!-- Project 3-->
	<div class="six columns category nature">
		<h5>SHADOW LIGHT</h5>
		<p>
			 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</p>
		<div class="portofoliothumb">
			<div class="portofoliothumboverlay">
				<div class="viewgallery">
					<a data-gal="prettyPhoto[gallery]" href="images/temp/folio3.jpg"><img src="images/playgal.png" class="left galleryicon" alt=""> Gallery</a>
				</div>
				<div class="inner">
					<a class="projectdetail" href="portofoliodetail.html">+ Project Details</a>
				</div>
			</div>
			<img src="images/temp/folio3.jpg" alt=""/>
		</div>
	</div>
	<!-- Project 4-->
	<div class="six columns category nature castles">
		<h5>WHITE CASTLE</h5>
		<p>
			 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		</p>
		<div class="portofoliothumb">
			<div class="portofoliothumboverlay">
				<div class="viewgallery">
					<a data-gal="prettyPhoto[gallery]" href="images/temp/folio4.jpg"><img src="images/playgal.png" class="left galleryicon" alt=""> Gallery</a>
				</div>
				<div class="inner">
					<a class="projectdetail" href="portofoliodetail.html">+ Project Details</a>
				</div>
			</div>
			<img src="images/temp/folio4.jpg" alt=""/>
		</div>
	</div>
</div>
<div class="hr">
</div>
<!-- TWITTER
================================================== -->
<div class="tweetarea">
	<div class="tweettext">
		<div class="row">
			<div class="twelve columns">
				<div class="tweet">
				</div>
			</div>
		</div>
	</div>
</div>
<!-- FOOOTER 
================================================== -->
<div id="footer">
	<footer class="row">
	<p class="back-top floatright">
		<a href="#top"><span></span></a>
	</p>
	<div class="four columns">
		<h1>ABOUT US</h1>
		 Our goal is to keep clients satisfied!
	</div>
	<div class="four columns">
		<h1>GET SOCIAL</h1>
		<div class="social facebook">
			<a href="#"></a>
		</div>
		<div class="social twitter">
			<a href="#"></a>
		</div>
		<div class="social deviantart">
			<a href="#"></a>
		</div>
		<div class="social flickr">
			<a href="#"></a>
		</div>
		<div class="social dribbble">
			<a href="#"></a>
		</div>
	</div>
	<div class="four columns">
		<h1 class="newsmargin">NEWSLETTER</h1>
		<div class="row collapse newsletter floatright">
			<div class="ten mobile-three columns">
				<input type="text" class="nomargin" placeholder="Enter your e-mail address...">
			</div>
			<div class="two mobile-one columns">
				<a href="#" class="postfix button expand">GO</a>
			</div>
		</div>
	</div>
	</footer>
</div>
<div class="copyright">
	<div class="row">
		<div class="six columns">
			 &copy;<span class="small">Copyright &copy; 2014.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></span>
		</div>
		<div class="six columns">
			<span class="small floatright"> Purchase "Studio Francesca" - </span>
		</div>
	</div>
</div>
<!-- JAVASCRIPTS 
================================================== -->
<!-- Javascript files placed here for faster loading -->
<script src="javascripts/foundation.min.js"></script>
<script src="javascripts/jquery.cycle.js"></script>
<script src="javascripts/app.js"></script>
<script src="javascripts/modernizr.foundation.js"></script>
<script src="javascripts/slidepanel.js"></script>
<script src="javascripts/scrolltotop.js"></script>
<script src="javascripts/hoverIntent.js"></script>
<script src="javascripts/superfish.js"></script>
<script src="javascripts/responsivemenu.js"></script>
<script src="javascripts/jquery.tweet.js"></script>
<script src="javascripts/twitterusername.js"></script>
<script src="javascripts/jquery.isotope.min.js"></script>
<script src="javascripts/jquery.prettyPhoto.js"></script>
<script src="javascripts/custom.js"></script>

</body>
</html>